import React, { useState } from 'react'
import '../../../css/oper_inspertion/tablejian.less'
import { useNavigate } from 'react-router-dom'
// 修复 theme 未使用问题
import { Button, message, Steps } from 'antd'; // 移除未使用的 theme
// 定义一个名为Sendtable的函数组件

//组件
import Sendtb from './component/Sendtb';
import Secode from './component/Secode';
import Thired from './component/Thired';
import Rusult from './component/Rusult';
const steps = [
    {
        title: '发起汛前检查',
        content: <div>
            <Sendtb></Sendtb>
        </div>,
    },
    {
        title: '下发检查通知单',
        content:
            <>
                <Secode></Secode>
            </>,
    },
    {
        title: '检查结果报告',
        content:
            <div>
                <Thired></Thired>
            </div>
        ,
    },
    {
        title: '报告审核',
        content: <div>
            <Rusult></Rusult>
        </div>,
    },

];


const Sendtable: React.FC = () => {
    // 使用useNavigate钩子函数获取导航对象
    const navigate = useNavigate()
    // 定义一个名为dian的函数，用于导航
    const dian = () => {
        navigate(-1)
    }

    const [current, setCurrent] = useState(0);

    const next = () => {
        setCurrent(current + 1);
    };

    const prev = () => {
        setCurrent(current - 1);
    };

    const items = steps.map((item) => ({ key: item.title, title: item.title }));

    const contentStyle: React.CSSProperties = {
        height: '84%',
        marginTop: 16,
    };
    const finatly = () => {
        navigate(-1)
        message.success('审核成功！')
    }

    return (
        <div className='tablejian'>
            <div className='tablejian_top'>
                {/* 点击按钮时调用dian函数，实现导航功能 */}
                <button className='btma' onClick={dian}>返回</button>
            </div>
            <div className='tablejian_bottom'>
                <Steps current={current} items={items} />
                <div style={contentStyle}>{steps[current].content}</div>
                <div style={{ marginTop: 24, textAlign: 'right' }}>
                    {current < steps.length - 1 && (
                        <>
                            <Button type="primary" onClick={() => next()}>
                                下一步
                            </Button>
                        </>
                    )}
                    {current === steps.length - 1 && (
                        <Button type="primary" onClick={() => finatly()}>
                            完成
                        </Button>
                    )}
                    {current > 0 && (
                        <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                            上一步
                        </Button>
                    )}
                </div>
            </div>
        </div>
    )
}

export default Sendtable
